import React from 'react';
import { Divider, Popconfirm } from "antd";
import Link from "umi/link";
import queryString from 'query-string';
import { getMenuRouter, getPageOperate } from '../../../../components/layouts/menuFn';


class BasePage extends React.PureComponent {

  getMenuRouter = getMenuRouter.bind(this);

  getPageOperate = getPageOperate.bind(this);

  dispatchType = {
    todo: 'FlowHandle/getProTodo',
    processed: 'FlowHandle/getProProcessed',
    apply: 'FlowHandle/getProApply',
  };

  CatalogueData = [
    {
      name: "待我处理",
      id: "todo",
      business: [],
    },
    {
      name: "我已处理",
      id: "processed",
      business: [],
    },
    {
      name: "我的申请",
      id: "apply",
      business: [],
    },
  ];

  getOprateDisable = (type) => {
    const { location: { pathname = '' }, menuDataList, resourceList } = this.props;
    const res = this.getPageOperate(type, pathname, menuDataList, resourceList);
    return res;
  }

  getColumns = () => {
    const columns = [{
      title: '流程名称',
      dataIndex: 'modelName',
      key: 'modelName',
    }, {
      title: '申请人',
      dataIndex: 'applyUserName',
      key: 'applyUserName',
      width: '18%',
    }, {
      title: '申请时间',
      dataIndex: 'applyTime',
      key: 'applyTime',
      // width: '20%',
    },
    // {
    //   title: '所属系统',
    //   dataIndex: 'appName',
    //   key: 'appName',
    // }, {
    //   title: '所属业务',
    //   dataIndex: 'busiName',
    //   key: 'busiName',
    // }, 
    {
      title: '当前环节',
      dataIndex: 'taskName',
      key: 'taskName',
      width: '20%',
    }, {
      title: '到单时间',
      dataIndex: 'createTime',
      key: 'createTime',
      // width: '20%',
    }, {
      title: '操作',
      dataIndex: 'opration',
      render: (text, record) => {
        const { assignee, taskId, formKey, processDefinitionId, canRollback } = record; // 是否当前任务处理 1:是，0:否
        const rollback = this.getOprateDisable('rollback');
        const taskhandle = this.getOprateDisable('taskhandle');
        const taskclaim = this.getOprateDisable('claim');
        return (
          <div>
            <Link
              to={{
                pathname: '/flowimplement/flowhandle/detail',
                search: queryString.stringify({
                  processInstanceId: record.processInstanceId,
                  actype: this.processType,
                }),
              }}
            >
              详情
            </Link>
            {(this.processType === 'todo' || (this.processType === 'apply' && assignee === 1)) && (
              <React.Fragment>
                {/* true/false，false的时候显示签收按钮，true显示处理按钮 */}
                <Divider type="vertical" />
                {record.claim === true && (
                  <React.Fragment>
                    {taskhandle && (
                      <React.Fragment>
                        <Link
                          to={{
                            pathname:  '/flowimplement/flowhandle/deal',
                            search: queryString.stringify({
                              taskId,
                              processDefinitionId,
                              formKey,
                            }),
                          }}
                        >
                          处理
                        </Link>
                        {/* <a onClick={(e) => { e.preventDefault(); this.handleDealFormVisible(true, record) }}>处理</a> */}
                        <Divider type="vertical" />
                      </React.Fragment>
                    )}
                    {(this.processType === 'todo' && rollback && canRollback) && ( // 待我处理--退回
                      <React.Fragment>
                        <a onClick={(e) => { e.preventDefault(); this.handleRollbackVisible(true, record) }}>退回</a>
                      </React.Fragment>
                    )}
                  </React.Fragment>
                )}
                {(record.claim === false && taskclaim) && (
                  <Popconfirm placement="left" title={`确定签收：${record.modelName}?`} onConfirm={() => { this.handleTaskclaim(record) }} okText="确定" cancelText="取消">
                    <a onClick={(e) => { e.preventDefault(); }}>签收</a>
                  </Popconfirm>
                )}
              </React.Fragment>
            )}
          </div>
        );
      },
    }];
    return columns;
  }

  // 获取查询参数
  getQueryParam = () => {
    const { page: { pageNum, pageSize } } = this.state;
    return { ...this.searchParams, pageNum, pageSize };
  }

  // 触发查询
  initData = () => {
    const { dispatch } = this.props;
    const params = this.getQueryParam();
    const type = this.dispatchType[this.processType] || '';
    if (!type) return;
    dispatch({ type, payload: params });
  }

  // 页码页数改变
  handlePageChange = (pageNum, pageSize) => {
    this.setState({ page: { pageNum, pageSize } }, () => {
      this.initData();
    });
  }

  // 搜索
  handleSearch = () => {
    const { page } = this.state;
    if (this.filterForm) this.filterForm.handleSubmit();
    if (this.queryExtraForm) this.queryExtraForm.handleSubmit();
    this.setState({ page: { ...page, pageNum: 1 } }, () => {
      this.initData();
    });
  }
}
export default BasePage;